<template>
    <h2>块级和行内</h2>
    <div class="块级和行内">
        <p class="tw:w-39 tw:bg-indigo-200">
            当控制文本流时, 使用 CSS 参数 <span class="tw:inline tw:text-red-300 tw:bg-green-300">display: inline</span> 可以使内部文本正常换行
        </p>
        <p class="tw:w-39 tw:bg-indigo-200">
            而使用参数 <span class="tw:inline-block tw:text-red-300 tw:bg-green-300">display: inline-block</span> 则会对元素进行包裹, 防止其内部的元素超出其父元素
        </p>
        <p class="tw:w-39 tw:bg-indigo-200">
            最后, 使用参数 <span class="tw:block tw:text-red-300 tw:bg-green-300">display: block</span> 会让元素独占一行, 并填充父元素
        </p>
    </div>

    <h2>流根</h2>
    <div class="tw:p-4">
        <div class="tw:my-4">开始</div>
        <div class="tw:flow-root">
            <div class="tw:my-4">
                好吧，让我告诉你一些有趣的男孩。 您知道那个小邮票，上面写着“纽约公共图书馆”吗？ 好吧，这对您来说可能并不重要，但这对我来说意义重大。
            </div>
        </div>
        <div class="tw:flow-root">
            <div class="tw:my-4">
                当然，你想笑就笑吧。我见过你这种人华而不实、哗众取宠、标榜传统我知道你在想什么这家伙怎么会对图书馆的旧书如此大惊小怪？好吧，我给你点提示，年轻人
            </div>
        </div>
        <div class="tw:my-4">结束</div>
    </div>

    <h2>柔性</h2>
    <div class="tw:flex tw:items-center">
        <img src="@/assets/img/头像.jpeg" alt="头像" class="tw:w-15">
        <div>
            <strong>安德鲁-阿尔弗雷德</strong>
            <span class="tw:block">技术顾问</span>
        </div>
    </div>

    <h2>行内柔性</h2>
    <p>
        在密歇根州，瓶子可以以 10 美分的价格退回，而在这里却只需 5 美分, 我花了大半天的时间研究如何利用它.
        <span class="tw:inline-flex tw:items-center tw:justify-center">
            <img src="@/assets/img/头像.jpeg" alt="头像" class="tw:h-5 tw:align-middle"></img>
            <span class="tw:text-[3rem]">克莱默</span>
        </span>
        他一直告诉我没有办法成功，他已经计算过所有可能的方法，但我相信一定有办法成功，这里的机会实在太多了。
    </p>

    <h2>网格</h2>
    <div class="tw:grid tw:grid-cols-3 tw:grid-rows-3 tw:gap-4 tw:h-50 tw:w-100 tw:my-5">
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
    </div>
    <div class="tw:grid tw:grid-cols-3 tw:grid-rows-3 tw:gap-4 tw:h-50 tw:w-100 tw:my-5">
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
    </div>

    <h2>行内网格</h2>
    <div class="tw:inline-grid tw:grid-cols-3 tw:grid-rows-3 tw:gap-4 tw:h-50 tw:w-100 tw:mx-5">
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
    </div>
    <div class="tw:inline-grid tw:grid-cols-3 tw:grid-rows-3 tw:gap-4 tw:h-50 tw:w-100 tw:mx-5">
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
        <div class="tw:h-[100%] tw:w-[100%] tw:bg-blue-300"></div>
    </div>

    <h2>透明容器</h2>
    <div class="tw:flex tw:h-10 tw:gap-4">
        <div class="tw:flex tw:h-[100%] tw:bg-sky-300 tw:w-20 tw:justify-center tw:items-center tw:rounded-md">01</div>
        <div class="tw:contents">
            <div class="tw:flex tw:h-[100%] tw:bg-sky-300 tw:w-20 tw:justify-center tw:items-center tw:rounded-md">02</div>
            <div class="tw:flex tw:h-[100%] tw:bg-sky-300 tw:w-20 tw:justify-center tw:items-center tw:rounded-md">03</div>
        </div>
        <div class="tw:flex tw:h-[100%] tw:bg-sky-300 tw:w-20 tw:justify-center tw:items-center tw:rounded-md">04</div>
    </div>

    <h2>表格</h2>
    <div class="tw:table tw:w-full">
        <div class="tw:table-header-group">
            <div class="tw:table-row">
                <div class="tw:table-cell tw:text-left">节目</div>
                <div class="tw:table-cell tw:text-left">艺人</div>
                <div class="tw:table-cell tw:text-left">年份</div>
            </div>
        </div>
        <div class="tw:table-row-group">
            <div class="tw:table-row">
                <div class="tw:table-cell">滑动的骨头先生（下一站，波特斯维尔）</div>
                <div class="tw:table-cell">马尔科姆-洛克耶</div>
                <div class="tw:table-cell">马尔科姆-洛克耶</div>
            </div>
            <div class="tw:table-row">
                <div class="tw:table-cell">巫女</div>
                <div class="tw:table-cell">老鹰乐队</div>
                <div class="tw:table-cell">1972</div>
            </div>
        </div>
    </div>

    <h2>隐藏</h2>
    <div class="tw:flex tw:h-15 tw:gap-4">
        <div class="tw:hidden tw:h-full tw:w-30 tw:bg-indigo-300 tw:flex tw:justify-center tw:items-center tw:rounded-md">01</div>
        <div class="tw:h-full tw:w-30 tw:bg-indigo-300 tw:flex tw:justify-center tw:items-center tw:rounded-md">02</div>
        <div class="tw:h-full tw:w-30 tw:bg-indigo-300 tw:flex tw:justify-center tw:items-center tw:rounded-md">03</div>
    </div>
</template>

<style scoped>
    div.tw\:p-4, div.tw\:my-4, div.tw\:flow-root {
        border: 1px solid rgb(57, 135, 70);
    }
    span[class|=tw\:inline] {
        border: 1px solid black;
    }
</style>